<template>
  <a v-if="!!element.url" :href="element.url" target="_blank">
    <span :style="cnElementStyle(element)">{{ element.content }}</span>
  </a>
  <span v-else :style="cnElementStyle(element)">{{ element.content }}</span>
</template>

<script lang="ts" setup>
import { CSSProperties, PropType, toRefs } from 'vue';
import { type CnElement } from '../../types';
import {
  ELEMENT_STYLE_MASK_BACKGROUND_COLOR,
  ELEMENT_STYLE_MASK_BOLD,
  ELEMENT_STYLE_MASK_ITALIC,
  ELEMENT_STYLE_MASK_STRIKETHROUGH,
  ELEMENT_STYLE_MASK_TEXT_COLOR,
  ELEMENT_STYLE_MASK_UNDERLINE,
} from '../../util';

const props = defineProps({
  element: {
    type: Object as PropType<CnElement>,
    required: true,
  },
});
const { element } = toRefs(props);

const cnElementStyle = (element: CnElement): CSSProperties => {
  const style_ = element.style;
  const cnElementStyle_: CSSProperties = {};
  if (style_ & ELEMENT_STYLE_MASK_BOLD) {
    cnElementStyle_.fontWeight = 'bold';
  }
  if (style_ & ELEMENT_STYLE_MASK_ITALIC) {
    cnElementStyle_.fontStyle = 'italic';
  }
  if (style_ & ELEMENT_STYLE_MASK_STRIKETHROUGH) {
    cnElementStyle_.textDecoration = 'line-through';
  }
  if (style_ & ELEMENT_STYLE_MASK_UNDERLINE) {
    cnElementStyle_.textDecoration = `underline ${cnElementStyle_.textDecoration ?? ''}`;
    cnElementStyle_.textDecorationSkipInk = 'none';
    cnElementStyle_.textUnderlineOffset = '0.2em';
  }
  const textColorStyle: number = style_ & ELEMENT_STYLE_MASK_TEXT_COLOR;
  if (textColorStyle) {
    cnElementStyle_.color = getTextColor(textColorStyle);
  }
  const backgroundColorStyle: number = style_ & ELEMENT_STYLE_MASK_BACKGROUND_COLOR;
  if (backgroundColorStyle) {
    cnElementStyle_.backgroundColor = getBackgroundColor(backgroundColorStyle);
  }
  return cnElementStyle_;
};
const getTextColor = (textColorStyle: number) => {
  switch (textColorStyle) {
    case 1024: // 粉红色 2^10
      return '#d83931';
    case 2048: // 橙色 2^11
      return '#de7802';
    case 3072: // 黄色 2^11 + 2^10
      return '#dc9b04';
    case 4096: // 绿色 2^12
      return '#2ea121';
    case 5120: // 蓝色 2^12 + 2^10
      return '#245bdb';
    case 6144: // 紫色 2^12 + 2^11
      return '#6425d0';
    case 7168: // 灰色 2^12 + 2^11 + 2^10
      return '#646a73';
    default:
      return '#000';
  }
};
const getBackgroundColor = (backgroundColorStyle: number) => {
  switch (backgroundColorStyle) {
    case 32: // 浅粉红色 2^5
      return '#fbbfbc';
    case 64: // 浅橙色 2^6
      return 'rgba(254, 212, 164, 0.8)';
    case 96: // 浅黄色 2^6 + 2^5
      return 'rgba(255, 246, 122, 0.8)';
    case 128: // 浅绿色 2^7
      return 'rgba(183, 237, 177, 0.8)';
    case 160: // 浅蓝色 2^7 + 2^5
      return 'rgba(186, 206, 253, 0.7)';
    case 192: // 浅紫色 2^7 + 2^6
      return 'rgba(205, 178, 250, 0.7)';
    case 224: // 浅灰色 2^7 + 2^6 + 2^5
      return '#f2f3f5';
    case 256: // 暗粉红色 2^8
      return '#f76964';
    case 288: // 暗橙色 2^8 + 2^5
      return '#ffa53d';
    case 320: // 暗黄色 2^8 + 2^6
      return '#ffe928';
    case 352: // 暗绿色 2^8 + 2^6 + 2^5
      return '#62d256';
    case 384: // 暗蓝色 2^8 + 2^7
      return 'rgba(78, 131, 253, 0.55)';
    case 416: // 暗紫色 2^8 + 2^7 + 2^5
      return 'rgba(147, 90, 246, 0.55)';
    case 448: // 暗灰色 2^8 + 2^7 + 2^6
      return '#bbbfc4';
    case 480: // 暗银灰色 2^8 + 2^7 + 2^6 + 2^5
      return 'rgba(222, 224, 227, 0.8)';
    default:
      return '#fff';
  }
};
</script>
